<template>
  <div>
    <a-modal v-model="visible" :title="title" width="50%" :footer="null">
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="编号">{{ this.productCode }}</a-descriptions-item>
        <a-descriptions-item label="名称">{{ this.productName }}</a-descriptions-item>
        <a-descriptions-item label="类型">{{ this.productTypeName }}</a-descriptions-item>
        <a-descriptions-item label="材料">{{ this.material }}</a-descriptions-item>
      </a-descriptions>
      <br />
      <a-descriptions v-if="productType === '0'" bordered :column="3">
        <a-descriptions-item label="成品">{{ this.finished }}</a-descriptions-item>
        <a-descriptions-item label="半成品">{{ this.partially }}</a-descriptions-item>
        <a-descriptions-item label="废品">{{ this.fail }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions v-else bordered>
        <a-descriptions-item label="数量" :span="1">{{ this.finished }}</a-descriptions-item>
      </a-descriptions>
      <br />
      <a-descriptions bordered :column="3">
        <a-descriptions-item label="创建人">{{ this.createBy }}</a-descriptions-item>
        <a-descriptions-item label="创建时间" :span="2">{{ this.createTime }}</a-descriptions-item>
        <a-descriptions-item label="最后修改人">{{ this.updateBy }}</a-descriptions-item>
        <a-descriptions-item label="最后修改时间" :span="2">{{ this.updateTime }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ this.remark }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import { getProduct } from '@/api/erp/product'

export default {
  name: 'ProductDetails',
  data () {
    return {
      visible: false,
      productCode: undefined,
      productName: undefined,
      productType: undefined,
      material: undefined,
      finished: undefined,
      partially: undefined,
      fail: undefined,
      remark: undefined,
      createBy: undefined,
      createTime: undefined,
      updateBy: undefined,
      updateTime: undefined,
      title: '',
      productTypes: []
    }
  },
  computed: {
    productTypeName () {
      for (var i = 0; i < this.productTypes.length; i++) {
        if (this.productTypes[i].dictValue === this.productType) {
          return this.productTypes[i].dictLabel
        }
      }
      return '其它'
    }
  },
  created () {
    this.getDicts('xzg_product_type').then(response => {
      this.productTypes = response.data
    })
  },
  methods: {
    openDetails (productId) {
      this.reset()
      getProduct(productId).then(response => {
        const detail = response.data
        this.productCode = detail.productCode
        this.productName = detail.productName
        this.productType = detail.productType
        this.material = detail.material
        this.finished = detail.finished
        this.partially = detail.partially
        this.fail = detail.fail
        this.remark = detail.remark
        this.createBy = detail.createBy
        this.createTime = detail.createTime
        this.updateBy = detail.updateBy
        this.updateTime = detail.updateTime
        this.title = detail.productName + ' 详情信息'
        this.visible = true
      })
    },
    reset () {
      this.productCode = undefined
      this.productName = undefined
      this.productType = undefined
      this.material = undefined
      this.finished = undefined
      this.partially = undefined
      this.fail = undefined
      this.remark = undefined
      this.createBy = undefined
      this.createTime = undefined
      this.updateBy = undefined
      this.updateTime = undefined
      this.title = ''
    }
  }
}
</script>
